<template>
    <div id='test'>
        
    </div>    
</template>
<script>
var vm;
export default {
    data() {
        return {
            pageData: null,
        }
    },
    created() {
        vm = this;
    },
    mounted() {
        if (typeof echarts == 'undefined') {
            let script = document.createElement("script");
            script.onload = function () {
                vm.initData();
            };
            script.src = "https://cdn.bootcss.com/echarts/4.0.0/echarts.js";
            document.body.appendChild(script);
        }else {
            vm.initData();
        }
    },
    methods: {
        initData() {
            axios.get(global.SERVER + '/api/id/0/4.1.2.3')
                .then(function (response) {
                    vm.pageData = response.data;
                    console.log(vm.pageData)
                    vm.initChart();
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        initChart() {
            let childrenData = [{value:155, name:''}];
            vm.pageData[0].children.forEach(element => {
                childrenData.push({value:10,name: element.title3})
            });
                childrenData.push({value:175, name:''})
            console.log(childrenData)
            let option = {
                series: [
                    {
                        type:'pie',
                        center: ['-10%','-10%'],
                        radius: ['120%', '122%'],
                        itemStyle: {
                            color: (params)=>{
                                console.log(params)
                                if (params.dataIndex == 1) {
                                    return "#F66001";
                                }
                                return '#EBEBEB'
                            }
                        },
                        labelLine: {
                            length: -30,
                            length2:10,
                            show: false
                        },
                        label: {
                            show: true,
                            color:'#929297',
                            fontSize: 14,
                            lineHeight: 14
                        },
                        data:[
                            {value:140, name:''},
                            {value:10, name:vm.pageData[0].parent[vm.pageData[0].parent.length-1].t2},
                            {value:190, name:''}
                        ]
                    },
                    {
                        type:'pie',
                        center: ['-10%','-10%'],
                        radius: ['210%', '212%'],
                        itemStyle: {
                            color: (params)=>{
                                console.log(params)
                                if (params.dataIndex == 1) {
                                    return "#F66001";
                                }
                                return '#EBEBEB'
                            }
                        },
                        labelLine: {
                            length: -40,
                            length2:20,
                            show: false
                        },
                        label: {
                            show: true,
                            color:'#929297',
                            fontSize: 14,
                            lineHeight: 14
                        },
                        data:[
                            {value:170, name:''},
                            {value:10, name:vm.pageData[0].title3},
                            {value:220, name:''}
                        ]
                    },
                    {
                        type:'pie',
                        center: ['-10%','-10%'],
                        radius: ['300%', '302%'],
                        itemStyle: {
                            color: (params)=>{
                                console.log(params)
                                if (params.dataIndex == 1) {
                                    return "#F66001";
                                }
                                return '#EBEBEB'
                            }
                        },
                        labelLine: {
                            length:-10,
                            length2:0
                        },
                        labelLine: {
                            length: -60,
                            length2:65,
                            show: false
                        },
                        label: {
                            show: true,
                            color:'#929297',
                            fontSize: 14,
                            lineHeight: 14
                        },
                        data:childrenData
                    }
                ]
            };
            vm.renderChart('test', option)
        },
        renderChart(chartId, options) {
            var dom = document.querySelector("#"+chartId);
            var myChart = echarts.init(dom);
            myChart.setOption(options);
        }
    }
}
</script>
<style lang="scss" scoped>
    #test {
        width: 100vw;
        height: 100vh;
    }
</style>
